  <template>
	<view class="zai-box">
        <scroll-view scroll-y class="page">
            <view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
				<image :src="appInfo.appLogo" mode='aspectFit' class="zai-logo "></image>
				<view class="zai-title text-shadow ">{{appInfo.appTitle}} </view>
			</view>
            <view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
				<block v-if="loginWay==1">
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view>
						<input placeholder="请输入账号" name="input" v-model="userName"></input>
					</view>
					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-lock margin-right-xs"></text>密码:</view>
						<input class="uni-input" placeholder="请输入密码" :password="!showPassword" v-model="password" />
						<view class="action text-lg">
						    <text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword"></text>
						</view>
					</view>
					<view class="padding text-center margin-top">
						<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="onLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
						</button>
						<button v-if="false" class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="loginWay=3-loginWay">短信登录
						</button>
						<!-- #ifdef MP-WEIXIN -->
						<button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="onWeChatLogin">一键登录
						</button>
						<!-- #endif -->
					</view>
				</block>
                <block v-else-if="loginWay==2">
                	<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
                		<view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view>
                		<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNo"></input>
                	</view>
                	<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
                		<view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view>
                		<input class="uni-input" placeholder="请输入验证码" v-model="smsCode"/>
                		<view class="action">
                			<button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</button>
                		</view>
                	</view>
                	<view class="padding text-center margin-top">
                		<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']"
                			@tap="onSMSLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
                		</button>
                		<button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
                			@tap="loginWay=1">账户登录
                		</button>
                	</view>
                </block>
				<block v-else>
					<view class="cu-form-group9 margin-top9  shadow-warp9" :class="[shape=='round'?'round':'']">
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						  <image class="avatar" :src="avatarUrl"></image>
						</button>
					</view>
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-people margin-right-xs"></text>昵称:</view>
						<input type="nickname" @change="getNickName" class="weui-input" v-model="nickName" placeholder="请输入昵称"></input>
					</view>
					
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view>
						<input placeholder="请输入手机号" disabled="true" type="number" maxlength="11" v-model="phoneNumber"></input>
						<view class="action">
							<button class="cu-btn line-blue sm" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
							<!-- <button class="cu-btn line-blue sm" :disabled="isSendSMSEnable" @click="onSMSSend"> 获取手机号</button> -->
						</view>
					</view>
					<!-- <view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view>
						<input class="uni-input" placeholder="请输入验证码3" v-model="smsCode"/>
						

						<view class="action">
							<button class="cu-btn line-blue sm" :disabled="isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</button>
						</view>
					</view> -->
					<view class="padding text-center margin-top">
						<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="onWXLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
						</button>
						<button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="loginWay=1">账户登录
						</button>
					</view>
				</block>
				
	
				<!-- #ifdef APP-PLUS -->
				<view class="padding flex flex-direction  text-center">
					当前版本:{{version}}
				</view>
				<!-- #endif -->
				
            </view>
        </scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="../../static/logo.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">登录中...</view>
		</view>
    </view>

</template>

<script>
	import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
	import { mapActions } from "vuex"
    import configService from '@/common/service/config.service.js';
	
    export default {
		props:{
			cur:String,
		},
		watch: {
			cur: {
				immediate: true,
				handler:function(val,oldVal){
					console.log('cur',val,oldVal)
				    this.initLogin()
				},
			},
		},
        data() {
            return {
				shape:'',//round 圆形
				loading: false,
				userName: '',
				password: '',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version:'',
				//第三方登录相关信息
				thirdType:"wechat_open",
				thirdLoginInfo:"",
				thirdLoginState:false,
				bindingPhoneModal:false,
				thirdUserUuid:'',
				url: {
					bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
				},
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				nickName: '',
				phoneNumber:'',
				uploadUrl:"/sys/thirdLogin/upload",
				weChatLoginCode:'',
				appInfo:{}
            };
        },
		onLoad:function(){
			var that=this
			const loginParams = uni.getStorageSync('loginParams');
			// console.log("loginParams===",loginParams);
			that.userName=loginParams.username;
			that.password=loginParams.password;
			// #ifdef APP-PLUS
			plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
				that.version=wgtinfo.version
			});
			// #endif
			// this.initLogin()
		},
		computed: {
		      isSendSMSEnable() {
		        return this.smsCountDown <= 0 && this.phoneNo.length > 4;
		      },
		      getSendBtnText() {
		        if (this.smsCountDown > 0) {
		          return this.smsCountDown + '秒后发送';
		        } else {
		          return '发送验证码';
		        }
		      },
		      canSMSLogin() {
		        // return this.userName.length > 4 && this.smsCode.length > 4;
		      },
		      canPwdLogin() {
		        // return this.userName.length > 4 && this.password.length > 4;
		      },
		},
        methods: {
			 ...mapActions([ "mLogin","PhoneLogin","ThirdLogin" ]),
			onLogin: function (){
			        if(!this.userName || this.userName.length==0){
			          this.$tip.toast('请填写用户名');
			          return;
			        }
			        if(!this.password || this.password.length==0){
			           this.$tip.toast('请填写密码');
			          return;
			        }
			        let loginParams = {
			          username:this.userName,
			          password:this.password
			        }
					console.log("loginParams===",loginParams);
					uni.setStorageSync('loginParams', loginParams);
					this.loading=true;
			        this.mLogin(loginParams).then((res) => {
					  this.loading=false;
			          if(res.data.success){
						 // #ifdef APP-PLUS
						  this.saveClientId()
						 // #endif
						 // #ifndef APP-PLUS
						  this.$tip.success('登录成功!')
						  this.$Router.replaceAll({name:'index'})
						 // #endif
						}else{
			              this.$tip.alert(res.data.message);
			            }
			        }).catch((err) => {
			          let msg = err.data.message || "请求出现错误，请稍后再试"
			          this.loading=false;
					  this.$tip.alert(msg);
			        }).finally(()=>{
					  this.loading=false;
				})
			},
			saveClientId(){
				var info = plus.push.getClientInfo();
				var cid = info.clientid;
				this.$http.get("/sys/user/saveClientId",{params:{clientId:cid}}).then(res=>{
					console.log("res::saveClientId>",res)
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({name:'index'})
				})
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			onSMSSend() {
				let smsParams = {};
				smsParams.mobile=this.phoneNo;
				smsParams.smsmode="0";
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
                if(!smsParams.mobile || smsParams.mobile.length==0){
					this.$tip.toast('请输入手机号');
					return false
				}
				if(!checkPhone.test(smsParams.mobile)){
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				this.$http.post("/sys/sms",smsParams).then(res=>{
				  if(res.data.success){
					this.smsCountDown = 60;
					this.startSMSTimer();
				  }else{
					this.smsCountDown = 0;
					this.$tip.toast(res.data.message);
				  }
				});
			  },
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
				  this.smsCountDown--;
				  if (this.smsCountDown <= 0) {
					clearInterval(this.smsCountInterval);
				  }
				}, 1000);
			},
			onSMSLogin() {
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				
				if(!this.phoneNo || this.phoneNo.length==0){
				  this.$tip.toast('请填写手机号');
				  return;
				}
				if(!checkPhone.test(this.phoneNo)){
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				if(!this.smsCode || this.smsCode.length==0){
				  this.$tip.toast('请填短信验证码');
				  return;
				}
				let loginParams = {
				  mobile:this.phoneNo,
				  captcha:this.smsCode
				};
				this.PhoneLogin(loginParams).then((res) => {
				  console.log("res====》",res)
				  if(res.data.success){
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({name:'index'})
				  }else{
					this.$tip.error(res.data.message);
				  }
				}).catch((err) => {
				  let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
				  this.$tip.error(msg);
				});
			},
			loginSuccess() {
			  // 登陆成功，重定向到主页
			  this.$Router.replace({name:'index'})
			},
			requestFailed(err) {
			  this.$message.warning("登录失败")
			},
			onWeChatLogin(){
				console.log("onWeChatLogin")
				console.log("this.loginWay",this.loginWay)
				let that = this;
				uni.getUserInfo({
					desc:'登录的数据',
					provider: 'weixin',
					success(ures) {
						console.log(ures,'返回到用户信息')
						uni.login({
							provider: 'weixin',
							onlyAuthorize:true,
							success(lres) {
								console.log(lres,'请求微信登录返回的数据')
								let param = {
									code:lres.code
								}
								
								that.$http.get('/sys/thirdLogin/loginByWeChat',{params:param}).then((res)=>{
									console.log("表单数据",res);
								    if(res.data.success && res.data.code==60003){ //绑定手机号
										console.log("表单数据",res);
										that.loginWay=3;
										that.thirdUserUuid=res.data.result.unionid;
										that.weChatLoginCode=res.data.result.session_key;
								    }
									if(res.data.success && res.data.code==200){ //绑定手机号
										that.doThirdLogin(res.data.result);
									}
								})
							}
						})
					}
				})
			},
			getPhoneNumber(e) {
				var that=this;
				
			    console.log("e.detail.code",e.detail.code)  // 动态令牌
			    console.log("e.detail.errMsg",e.detail.errMsg) // 回调信息（成功失败都会返回）
			    console.log("e.detail.errno",e.detail.errno)  // 错误码（失败时返回）
				let loginParams = {
				  accessToken:that.weChatLoginCode,
				  code: e.detail.code,
				};
				console.log("getPhoneNumber Params===",loginParams)
				
				that.$http.post('/sys/thirdLogin/getPhoneNumber',loginParams).then((res)=>{
					console.log("getPhoneNumber",res);
					if (res.data.success) {
						// bindingPhoneModal.value = false;
						console.log("bindingPhone33333",res.data.message);
						this.phoneNumber=res.data.message;
					  } else {
						that.$tip.error(res.data.message);
					  }
				})
			  },
			  onChooseAvatar(e) {
				  console.log(e.detail)
				  var that=this;
				  const { avatarUrl } = e.detail
				  that.avatarUrl=avatarUrl;
				  console.log(avatarUrl)
				  console.log(that.avatarUrl)
				  that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
				  	filePath: that.avatarUrl,
				  	name: 'file'
				  }).then(res => {
					that.avatarUrl=that.$config.apiUrl+"/sys/common/static/"+res.data.message;
				  }).catch(err => {
				  	that.$tip.error(err.data.message)
				  });
				},
				getNickName(e){
					console.log(e.detail.value);
					this.nickName=e.detail.value
				},
			onWXLogin() {
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				var that=this;
				if(!that.avatarUrl || that.avatarUrl.startsWith('https://mmbiz.qpic.cn')){
				  that.$tip.toast('请点击头像选择微信头像');
				  return;
				}
				if(!that.nickName || that.nickName.length==0){
				  that.$tip.toast('请输入昵称');
				  return;
				}
				if(!that.phoneNumber || that.phoneNumber.length==0){
				  that.$tip.toast('请填写手机号');
				  return;
				}
				if(!checkPhone.test(that.phoneNumber)){
					that.$tip.toast('请输入正确的手机号');
					return false
				}
				
				let loginParams = {
				  mobile:that.phoneNumber,
				  realname:that.nickName,
				  avatarUrl:that.avatarUrl,
				  code:that.weChatLoginCode,
				  thirdUserUuid: that.thirdUserUuid,
				};
				console.log("loginParams===",loginParams)
				
				that.$http.post('/sys/thirdLogin/bindingPhone',loginParams).then((res)=>{
					console.log("bindingPhone",res);
					if (res.data.success) {
						// bindingPhoneModal.value = false;
						console.log("bindingPhone33333",res.data.result);
						that.doThirdLogin(res.data.result);
					  } else {
						that.$tip.error(res.data.message);
					  }
				})
			},
			// 根据token执行登录
			doThirdLogin(token) {
				var that=this;
				console.log("doThirdLogin",token);
			    that.ThirdLogin({token: token, thirdType: that.thirdType}).then(res => {
			        if (res.data.success) {
			            that.loginSuccess()
			        } else {
			            that.requestFailed(res)
			        }
			    }).catch((e) => {
			        alert(e.message || e)
			    })
			},
			loginSuccess() {
			      	this.$Router.replaceAll({name: 'index'})
			},
			requestFailed(err) {
			    this.$message.warning("登录失败")
			},
			initLogin() {
				let that = this;
				that.$http.get("/app/appUpdate/queryByAppid",{params:{appid: plus.runtime.appid, tenantId:1005,column:'sort',order:'asc',status:'Y'}}).then(res=>{
				  if(res.data.success){
					  res.data.result.appLogo=configService.staticDomainURL+'/'+res.data.result.appLogo
					  that.appInfo = res.data.result;
				  }else{
					that.$tip.toast(res.data.message);
				  }
				});
			}
        },
		beforeDestroy() {
		    if (this.smsCountInterval) {
		        clearInterval(this.smsCountInterval);
		    }
		},
    }
</script>

<style>
    .login-paddingtop {
        padding-top: 100upx;
    }

    .zai-box {
        padding: 0 20upx;
        padding-top: 100upx;
        position: relative;
    }

    .zai-logo {
        width: 200upx;
        height: 150px;
    }

    .zai-title {
       font-size: 58upx;
       color: #000000;
       text-align: center;
    }

    .input-placeholder, .zai-input {
        color: #94afce;
    }

    .zai-label {
        padding: 60upx 0;
        text-align: center;
        font-size: 30upx;
        color: #a7b6d0;
    }

    .zai-btn {
        background: #ff65a3;
        color: #fff;
        border: 0;
        border-radius: 100upx;
        font-size: 36upx;
    }

    .zai-btn:after {
        border: 0;
    }

    /*按钮点击效果*/
    .zai-btn.button-hover {
        transform: translate(1upx, 1upx);
    }
.avatar-wrapper {
  padding: 0;
  width: 86px !important;
  border-radius: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}	
.avatar {
  display: block;
  width: 86px;
  height: 86px;
}
</style>
